<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h2>条件渲染-show</h2>
    <button v-on:click="show = !show">btn</button>
    <div v-show="show">hello </div>
  </div>

  <script src="../vue3.js"></script>
  <script>

    // v-if控制的是元素的渲染和不渲染
    // v-show控制的是元素的css的display属性，显示和隐藏

    // v-if具有一个更低的初始开销（一开始就不显示的时候）
    // v-show具有一个更低的切换开销

    // 当一个元素需要频繁切换状态的时候，用v-show
    // 当一个元素初始就是不显示，并且不需要频繁切换状态的时候，用v-if



    // v-show 不支持在 <template> 元素上使用
    // v-else和v-else-if只能和v-if一起用，和v-show不能一起用

    const {createApp} = Vue;
    createApp({
      data() {
        return {
          show: false
        }
      }
    }).mount("#app");
  </script>
</body>
</html>